<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="icon" href="images/favicon.svg">
  <!-- Stylesheets -->
  <link rel="stylesheet" type="text/css" href="css/app.css" title="plain">
  <link rel="stylesheet" type="text/css" href="css/guac-custom.css" title="plain">
</head>
<body>
  <header>
    <div class="header__wrapper">
      <div class="toolbar">
        <img src="images/opennebula-5.0.png">
        <div class="toolbar__state">
          <img src="images/remote_console/guacamole.png">
          <h5></h5>
          <span class="spinner">
            <i class="fas fa-spinner fa-spin"></i>
          </span>
        </div>
        <div class="toolbar__buttons">
          <button class="button alert" id="buttons__sendctrlaltdel">
            Send CtrlAltDel
          </button>
          <button class="button secondary" id="buttons__reconnect" title="Reconnect">
            <i class="fas fa-redo-alt fa-fw"></i>
          </button>
          <button class="button secondary" id="buttons__fullscreen" title="Fullscreen">
            <i class="fas fa-expand fa-fw"></i>
          </button>
          <button class="button primary" id="buttons__osk" title="Show keyboard">
            <i class="fas fa-keyboard fa-fw"></i>
          </button>
          <button class="button primary" id="buttons__mouse" title="Emulate mouse">
            <i class="fas fa-mouse-pointer fa-fw"></i>
          </button>
          <button class="button primary" id="buttons__screenshot" title="Take screenshot">
            <i class="fas fa-camera fa-fw"></i>
          </button>
          <select class="hidden" id="select__resolution" title="Change screen resolution">
            <option value=''>default</option>
            <option value='640x480'>SD</option>
            <option value='1280x720'>HD</option>
            <option value='1920x1080'>Full HD</option>
            <option value='2560x1440'>Quad HD</option>
            <option value='2048x1080'>2k</option>
            <option value='3840x2160'>4k</option>
            <option value='7680x4320'>8k</option>
          </select>
        </div>
      </div>
      <div class="information"></div>
    </div>
  </header>
  <main>
    <%### Guacamole display screen ###%>
    <div class="wrapper__display">
      <div id="display"></div>
    </div>

    <%### Guacamole on-screen keyboard ###%>
    <div class="osk__container" id="osk__container">
      <div class="osk__header">
        <div class="osk__header__buttons">
          <button class="close">x</button>
        </div>
        <select id="select__qwerty"></select>
      </div>
      <div class="osk" id="osk"></div>
    </div>
  </main>

  <script src="dist/console/guacamole.js?v=<%= OpenNebula::VERSION %>"></script>
  <% view = $views_config.view(session[:user], session[:user_gname], session[:default_view]) %>
  <script type="text/javascript">
      var csrftoken = '<%= session[:csrftoken] %>';
      var view = JSON.parse('<%= view.to_json %>')
      var available_views = JSON.parse('["<%=
          $views_config.available_views(session[:user], session[:user_gname]).join('","')
        %>"]')
      var all_labels = JSON.parse('["<%=
          $views_config.get_all_labels(session[:user_gname]).join('","')
        %>"]')
      var all_views = JSON.parse('["<%=
          $views_config.get_all_views.join('","')
        %>"]')
      if ('<%= $conf[:addons] %>'){
        var addons = JSON.parse('<%= $conf[:addons].to_json %>');
      }
      var config = {
        'user_config' : {
            'lang' : '<%= session[:lang] %>',
            'vnc_wss' : '<%= session[:vnc_wss] %>',
            'table_order' : '<%= session[:table_order] %>',
            'default_view' : '<%= session[:default_view] %>',
            'page_length' : '<%= session[:page_length] %>'
        },
        'system_config' : {
            'marketplace_url' : '<%= $conf[:marketplace_url] %>',
            'vnc_request_password' : <%= $conf[:vnc_request_password] || false %>,
            'vnc_proxy_port' : '<%= $vnc.proxy_port %>',
            'vnc_client_port' : '<%= $conf[:vnc_client_port] %>',
            'max_upload_file_size' : <%= $conf[:max_upload_file_size] ? $conf[:max_upload_file_size] : "undefined" %>,
            'public_fireedge_endpoint': '<%= !$conf[:public_fireedge_endpoint].nil? ? $conf[:public_fireedge_endpoint].downcase : "" %>'
        },
        'view' : view,
        'available_views' : available_views,
        'all_labels' : all_labels,
        'all_views' : all_views,
        'user_id' : '<%= session[:user_id] %>',
        'user_gid' : '<%= session[:user_gid] %>',
        'display_name' : '<%= session[:display_name] %>',
        'zone_name' : '<%= session[:zone_name] %>',
        'zone_id' : '<%= session[:zone_id] %>',
        'federation_mode' : '<%= session[:federation_mode] %>',
        'vm_logos' : <%= logos_conf.to_json %>,
        'oned_conf' : <%= oned_conf.to_json %>,
        'support' : <%= support.to_json %>,
        'upgrade' : <%= upgrade.to_json %>,
        'mode' : '<%= session[:mode] %>'
      };
  </script>
</body>
</html>